import React, { useEffect } from "react"
import { Space, Table, Button } from "antd"
import { PlusOutlined } from "@ant-design/icons"
import { TableToolbar } from "app/components"

import EditModal from "./EditModal"
import { useMenu } from "./useMenu"

const Menu: React.FC = () => {
  const {
    getList,
    dataSource,
    queryParams,
    setQueryParams,
    form,
    setForm,
    modalConfig,
    setModalConfig
  } = useMenu()

  const componentProps = [
    {
      col: 5,
      key: "menuName",
      type: "input",
      label: "菜单名称",
      labelwidth: 90,
      placeholder: "请输入菜单名称"
    },
    {
      col: 4,
      key: "status",
      type: "select",
      label: "状态",
      labelwidth: 40,
      placeholder: "请选择菜单状态"
    }
  ]
  const columns = [
    {
      title: "菜单名称",
      dataIndex: "menuName",
      key: "menuName"
    },
    {
      title: "图标",
      dataIndex: "icon",
      key: "icon"
    },
    {
      title: "权限标识",
      dataIndex: "perms",
      key: "perms"
    },
    {
      title: "组件路径",
      dataIndex: "component",
      key: "component"
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status"
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime"
    },
    {
      title: "Action",
      key: "action",
      width: 100,
      render: () => (
        <Space size="small">
          <Button type="link" block>
            修改
          </Button>
          <Button type="link" block>
            新增
          </Button>
        </Space>
      )
    }
  ]

  // 页面初始化
  useEffect(() => {
    getList()
  }, [])

  const buttonProps = [
    {
      label: "新增",
      icon: <PlusOutlined />,
      onClick: () => console.log("add")
    }
  ]

  return (
    <>
      <TableToolbar
        getList={getList}
        queryParams={queryParams}
        setQueryParams={setQueryParams}
        buttonProps={buttonProps}
        componentProps={componentProps}
      />
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={{ hideOnSinglePage: true }}
        expandRowByClick
        rowKey="menuId"
      />

      <EditModal
        form={form}
        setForm={setForm}
        modalConfig={modalConfig}
        setModalConfig={setModalConfig}
      />
    </>
  )
}

export default Menu
